<template>
    <div class="scroll-outer">
      <div class="father-brower" ref="FatherBrower">
        <div 
           v-if="listdata!=undefined&&listdata.length!=0"
            v-for="(item,index) in listdata" :key="item.room_id" 
            style="display: flex;position: relative;overflow: visible;"
            @click="item.show_info=!item.show_info">
          <div :class="{
              'item': true,
              'user_item': item.room_type === 'double',
              'group_item':item.room_type === 'group'
          }">     
            <div>
              <img class="item_image" src="/public/4.jpg" alt="">
            </div>
            <div class="meta_info">
              <div>
                {{item?.meta?.username || item?.meta?.group_name}}
              </div>
              <div>
                {{item?.created_at}}
              </div>
            </div>
          </div>
          <div v-if="item.show_info" class="interact-box">
            <INTERACT v-if="item.status==0" :info="item"/>
          </div>
        </div>
        <div v-else>
          <div class="title" style="text-align: center;margin-top: 2px;">暂无数据</div>
      </div>
        <div class="brower-box" ref="BrowerBox"></div>
      </div>
    </div>
  </template>
  
  <script setup>
  import {  watch, ref, onMounted, nextTick } from 'vue';
  import INTERACT from "./interact.vue"
  
  let BrowerBox = ref(null)
  let FatherBrower = ref(null)
  const listdata=defineModel('listdata')
  
  watch(() =>listdata.value, (newA) => { 
  // console.log(newA)
  })
  
  const EMIT = defineEmits(['update'])
  
  const init_brower = () => {
    const target = BrowerBox.value
    if (!target) return;
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          EMIT('update')
        }
      });
    }, {
      root: FatherBrower.value,
      rootMargin: '0px',
      threshold: 0.1
    });
    
    observer.observe(target);
  }
  
  onMounted(async () => { 
    await nextTick()
    init_brower()
  })
  </script>
  
  <style scoped>
  /* 新增的外层容器 */
  .scroll-outer {
    position: relative;
    width: 100%;
    overflow-x: visible;
  }
  
  .father-brower {
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    width: calc(100% + 120px);
    padding-right: 120px;
  }
  
  .father-brower::-webkit-scrollbar {
    display: none;
  }
  
  .brower-box {
    margin-top: 2px;
    height: 20px;
    width: 100%;
    overflow: hidden;
  }
  
  .item {
    display: flex;
    gap: 3px;
    width: 100%;
    height: 50px;
    flex-direction: row; 
    justify-content: center;
    align-items: center;
    padding-left: 2px;
    box-sizing: border-box; 
    margin: 2px;
    user-select: none;
  }
  
  .item>div:nth-child(1) {
    display: flex; 
    justify-content: center;
    align-items: center;
    width: 30%; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
    font-size: 15px;
  }
  
  .item>div:nth-child(2) {
    display: flex; 
    justify-content: left;
    flex-direction: column;
    width: 70%; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
  }
  
  .user_item {
    background-color: rgba(167, 233, 200, 0.15);
    border-radius: 5px;
  }
  
  .group_item {
    background-color: rgba(140, 176, 238, 0.15);
    border-radius: 5px;
  }
  
  .item_image {
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }
  
  .meta_info>div:nth-child(1) {
    height: 50%;
    font-size: 15px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  
  .meta_info>div:nth-child(2) {
    height: 50%;
    font-size: 12px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  
  .interact-box {
    position: absolute;
    /* background-color: red; */
    height: 50px;
    right: -120px;
    width: 120px;
    z-index: 101;
  }
  </style>